<template>
	<view class="content">
		<view class="bj">
			<view class="line">
				<view class="text alpsoftjurnal">
					{{$t('deposit.text1')}}
				</view>
				<view class="right">
					<input type="text" v-model="form.wx_number" :placeholder="$t('pla')+$t('deposit.text1')">
				</view>
			</view>
			<view class="line">
				<view class="text alpsoftjurnal">
					{{$t('deposit.text2')}}
				</view>
				<view class="right">
					<input type="text" v-model="form.real_name" :placeholder="$t('pla')+$t('deposit.text2')">
				</view>
			</view>
			<view class="line">
				<view class="text alpsoftjurnal">
					{{$t('deposit.text3')}}
				</view>
				<view class="right">
					<image mode="widthFix" v-if="form.wx_payment_image" @click="upload" :src="form.wx_payment_image"></image>
					<image mode="widthFix" v-else @click="upload" :src="uploadImg"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="button alpsoftjurnal" @click="saveClick">
				{{$t('deposit.text4')}}
			</view>
		</view>
	</view>
</template>

<script>
import util from '../../../utils/util';
	export default {
		data() {
			return {
				uploadImg: this.$config.staticUrl + 'upload.png',
				form: {
					wx_number: '',
					real_name: '',
					wx_payment_image: ''
				}
			}
		},
		onLoad() {
			console.log(uni.getStorageSync('userinfo'));
			let form = uni.getStorageSync('userinfo')
			this.form.wx_number = form.wx_number
			this.form.real_name = form.real_name
			this.form.wx_payment_image = form.wx_payment_image
			util.setNavTitle()
		},
		methods: {
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.configs.webUrl + '/api/user/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: uni.getStorageSync('userinfo').token,
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								let res = JSON.parse(uploadFileRes.data)
								if(res.code == 1) {
									this.form.wx_payment_image = this.configs.webUrl+res.data.url
								}
							}
						});
					}
				});
			},
			saveClick() {
				this.form.token = uni.getStorageSync('userinfo').token,
				uni.request({
					url: this.configs.webUrl + '/api/user/edituser',
					data: this.form,
					success: res => {
						console.log(res);
						if(res.data.code == 1) {
							uni.navigateBack()
						}
						util.toast(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
	}

	.bj {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.line {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1px solid #EDEEEF;

			.text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #292C33;
			}

			.right {
				input {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					text-align: right;
				}

				image {
					width: 168rpx;
				}
			}
		}

		.line:first-child {
			padding-top: 0;
		}

		.line:last-child {
			padding-bottom: 0;
			border: 0;
		}
	}

	.bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		padding: 10rpx 40rpx 50rpx;

		.button {
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 60rpx;
			background: linear-gradient(90deg, #F75581 0%, #C860FF 100%);
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
</style>